<#import "/spring.ftl" as s>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <title>权限管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <#include '../include/baselink.ftl'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <link rel="stylesheet" type="text/css" href="<@s.url '/assets/css/jquery.pagination.css'/>">
    <link ref="stylesheet" type="text/css" href="<@s.url '/assets/plugins/fancytree/skin-win8/ui.fancytree.min.css'/>"/>
</head>

<body class="dashboard-page">
<#include '../include/skin-toolbox.ftl'>
<!-- Start: Main -->
<div id="main">
<#include '../include/header.ftl'>
<#include '../include/sidebar.ftl'>
    <!-- Start: Content-Wrapper -->
    <section id="content_wrapper">
        <!-- Start: Topbar -->
        <header id="topbar" class="alt">
            <div class="topbar-left">
                <ol class="breadcrumb">
                    <li class="crumb-active">
                        <a href="<@s.url '/'/>">控制台</a>
                    </li>
                    <li class="crumb-icon">
                        <a href="<@s.url '/'/>">
                            <span class="glyphicon glyphicon-home"></span>
                        </a>
                    </li>
                    <li class="crumb-link">
                       权限管理
                    </li>
                    <li class="crumb-trail">权限管理</li>
                </ol>
            </div>
        </header>
        <!-- End: Topbar -->
        <!-- Begin: Content -->
        <section id="content" class="table-layout animated fadeIn">
            <!-- begin: .tray-center -->
            <div class="tray tray-center">

                <div class="panel" id="spy7">
                    <div class="panel-heading">
                        <span class="panel-icon"><i class="fa fa-table"></i></span>
                        <span class="panel-title">用户列表</span>
                        <span class="panel-controls">
                            <a href="#" class="panel-control-color"></a>
                            <a href="#" class="panel-control-collapse"></a>
                            <a href="#" class="panel-control-fullscreen"></a>
                        </span>
                    </div>
                    <div class="panel-menu dark">
                        <div class="well well-sm">

                            <form class="form-inline">

                                <div class="form-group">
                                    <div class="input-group input-group-sm">
                                        <div class="input-group-addon btn btn-default">城市:</div>
                                        <select v-model="searchInfo.cityId" id="selCity" class="form-control input-sm w100">
                                            <option value="0">所有城市</option>
                                            <option v-bind:value="city.id" v-for="city in cityList">
                                                {{ city.name }}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group input-group-sm">
                                        <div class="input-group-addon btn btn-default">真实名称:</div>
                                        <input type="text" class="form-control input-sm" v-model="searchInfo.staffName">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group input-group-sm">
                                        <div class="input-group-addon btn btn-default">手机号:</div>
                                        <input type="text" class="form-control input-sm" v-model="searchInfo.mobile">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group input-group-sm">
                                        <div class="input-group-addon btn btn-default">角色:</div>
                                        <select v-model="searchInfo.role"  class="form-control input-sm w100">
                                            <option value="">不限制</option>
                                            <option v-bind:value="role.id" v-for="role in roles">
                                                {{ role.name }}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>
                    <div class="panel-body pn">
                        <div class="bs-component">
                            <div class="table-responsive">
                                <table class="table table-striped table-condensed table-responsive table-bordered">
                                    <thead>
                                    <tr>
                                        <th>城市</th>
                                        <th>姓名</th>
                                        <th>花名</th>
                                        <th>电话</th>
                                        <th>拥有角色</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="staff in staffs">
                                        <td>{{ findCityName(staff.cityId) }}</td>
                                        <td>{{ staff.trueName }}</td>
                                        <td>{{ staff.nickName }}</td>
                                        <td>{{ staff.mobile }}</td>
                                        <td>
                                            <template v-for="role in staff.roles">
                                                {{'['+role.name+']' }}
                                            </template>
                                        </td>
                                        <td>
                                            <a  class="btn btn-sm btn-default" data-toggle="modal" data-target="#roleModel" v-on:click="findStaffRole(staff.code)">设置角色</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-center" colspan="20" v-if="staffs.length == 0">没有数据 ！</td>
                                    </tr>
                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <td colspan="20">
                                            <div class="table-responsive">
                                                <div id="callBackPager"></div>
                                            </div>
                                        </td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End: Content -->

    <#include '../include/footer.ftl' />
    </section>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="roleModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">角色管理</h4>

                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">

                        <template v-for="role in roles">
                            <label class="checkbox-inline mr10">
                                <input type="checkbox" v-bind:id="'role'+role.id" v-bind:value="role.id" v-model="staffRole.roles">{{role.name}}
                            </label>
                        </template>

                    </form>
                </div><!-- /.modal-content -->
                <div class="modal-footer">
                    <button type="button" id="staffRoleCleanButtopn" class="btn btn-default" data-dismiss="modal"> 取消 </button>
                    <button type="button" class="btn btn-primary" v-on:click="saveStaffRole()" > 保存 </button>
                </div>
            </div><!-- /.modal -->
        </div>
    </div>


</div>
<#include '../include/footer_js.ftl'/>
<script src="<@s.url '/assets/js/jquery.pagination.min.js'/>"></script>
<script>



    var app = new Vue({
        el: '#main',
        data: {
            staffs:[],
            cityList: [],
            searchInfo:{
                page: 1,
                pageSize: 10,
                cityId: 0,
                staffName:null,
                mobile:null,
                role:''
            },
            roles:[],
            staffRole:{
                roles:[],
                staffCode:null
            }
        },
        created: function () {
            this.findAllCity();
            this.query();
            this.findAllRoles();
        },
        watch: {
            'searchInfo.page': function () {
                this.query();
            },
            'searchInfo.cityId':function () {
                this.search();
            },
            'searchInfo.mobile':function () {
                this.search();
            },
            'searchInfo.staffName':function () {
                this.search();
            },
            'searchInfo.role':function () {
                this.search();
            }
        },
        methods: {
            search: function () {
                this.searchInfo.page =1;
                $("#callBackPager").page("destroy");
                this.query();
            },
            findAllCity:function () {
                this.$http.get(contentPath+"/api/view/sys/area/allcities", null)
                        .then(function (response) {

                            if(response.data.retcode != 2000000){
                                swal(esponse.data.msg);
                                return;
                            }

                            this.cityList = response.data.data;
                        },function(error){
                            swal(error.data.msg);
                        })
            },
            findCityName:function (id) {
                var name = "";
                $.each(this.cityList,function (index,e) {
                    if (e.id == id){
                        name =  e.name;
                        return false
                    }
                });
                return name;
            },
            query: function () {
                var source = this.searchInfo;
                var queryInfo = $.extend(true,{}, source);
                if(source.cityId == 0 ){
                    queryInfo.cityId=null;
                }
                this.$http.post(contentPath+"/api/view/sys/user/list/page", queryInfo)
                        .then(function (response) {

                            if(response.data.retcode != 2000000){
                                swal(esponse.data.msg);
                                return;
                            }

                            if(response.data.data.list != null)
                                this.staffs = response.data.data.list;
                            var temp = this;
                            $("#callBackPager").page({
                                total: response.data.data.total,
                                pageSize:response.data.data.pageSize,
                                firstBtnText: '首页',
                                lastBtnText: '尾页',
                                prevBtnText: '上一页',
                                nextBtnText: '下一页',
                                showInfo: true,
                                showJump: true,
                                jumpBtnText: '跳转',
                                infoFormat: '{start} ~ {end}条，共{total}条'
                            }, response.data.data.page)
                                    .on("pageClicked", function (event, pageIndex) {
                                        temp.searchInfo.page = pageIndex + 1;
                                    })
                                    .on('jumpClicked', function (event, pageIndex) {
                                        temp.searchInfo.page = pageIndex + 1;
                                    });
                        }, function (response) {
                            swal(response.data.msg);
                        })
            },
            findAllRoles:function () {
                this.$http.post(contentPath+"/api/view/sys/role/listall")
                        .then(function (response) {
                            this.roles= response.data.data;
                        },function(error){
                            sweetAlert(error.body.msg);
                        });
            },
            findStaffRole:function (code) {

                this.staffRole.staffCode = code;

                this.$http.post(contentPath+"/api/view/sys/role/ids/"+code)
                        .then(function (response) {
                            this.staffRole.roles= response.data.data;
                        },function(error){
                            sweetAlert(error.body.msg);
                        });
            },saveStaffRole:function () {

                $('#staffRoleCleanButtopn').click();

                this.$http.post(contentPath+"/api/view/sys/user/setRoles",this.staffRole)
                        .then(function (response) {
                            sweetAlert("保存成功");
                        },function(error){
                            sweetAlert(error.body.msg);
                        });
            },
            saveDepartmentId:function () {
                var departmentNames ='';
                var departmentIds = jsDepartmentTree.get_selected();
                var departmentIdsStr = ','+departmentIds.toString()+',';
                var finalSelectDepartmentIds =[];

                findFinalSelect(departmentIds,finalSelectDepartmentIds);
                //设置input框显示的值
                $.each(finalSelectDepartmentIds,function (i,e) {
                    var node = jsDepartmentTree.get_node(e);
                    departmentNames += node.text+';';
                });
                $('#selectDepartmentNames').val(departmentNames.slice(0,-1));
                //设置最终要去查询的部门id

                if(finalSelectDepartmentIds.length === 0){
                    this.searchInfo.departmentIds = [];
                }else {
                    this.searchInfo.departmentIds = finalSelectDepartmentIds;
                }
                //从选种的部门id中进行筛选，得出最终要去查询的部门id
                function findFinalSelect(departmentIds,finalSelectDepartmentIds) {
                    $.each(departmentIds,function (i,e) {
                        var node = jsDepartmentTree.get_node(e);
                        var index = departmentIdsStr.search(','+node.data.parentId+',');
                        if(index >= 0){
                            findFinalSelect([node.data.parentId],finalSelectDepartmentIds);
                        }else {
                            var finalSelectDepartmentIdsStr = ','+finalSelectDepartmentIds.toString()+',';
                            var finalIndex = finalSelectDepartmentIdsStr.search(','+node.id+',');
                            if(finalIndex<0){
                                finalSelectDepartmentIds.push(node.id);
                            }
                        }
                    });
                }
                this.search();
                $('#selectDepartmentClean').click();
            }

        }
    })
</script>
</body>
</html>